В этом цикле статей мы создадим свою реализацию React с нуля. По окончании у вас будет понимание, как работает React, какие методы жизненного цикла компонента он вызывает и для чего. Статья рассчитана на тех, кто уже использовал React и хочет узнать о его устройстве, или на очень любопытных.

Данная статья является переводом React Internals, Part One: basic rendering

На самом деле это первая статья из пяти

1. Основы рендеринга < — мы здесь
2. ComponentWillMount и componentDidMount
3. Обновление
4. setState
5. Транзакции

Материал создавался, когда актуальным был React 15.3, в частности использование ReactDOM и stack reconciler. React 16 и выше имеет некоторые изменения. Тем не менее, этот материал остаётся актуальным, так как он даёт общее представление о том, что происходит «под капотом».

Часть 1. Основы рендеринга

Элементы и компоненты

В React есть три типа сущностей: нативный DOM элемент, виртуальный React элемент и компонент.

Нативные DOM элементы

Это и